<template>
	<view class="content">
		<view class='title_border'>
			<view class='title_text'>
				<text class='title'>资质信息查询</text>
			</view>
			<view class='nav_each'>
				<view class='nav_view' v-for='item in navList' @click='navClick(item.path)'>
					<view class="item_view">
						<view class="nav_img">
							<image class='nav_img_center' :src="item.src2" mode=""></image>
						</view>
						<text class='nav_text'>{{item.label}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class='title_border'>
			<view class='title_text'>
				<text class='title'>安全评估结果</text>
			</view>
			<view class='nav_each'>
				<view class='nav_view' v-for='item in navList1' @click='navClick(item.path)'>
					<view class="item_view">
						<view class="nav_img">
							<image class='nav_img_center' :src="item.src2" mode=""></image>
						</view>
						<text class='nav_text'>{{item.label}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: [{
					src2: '/static/img/query_1.png',
					label: '企业查询',
					path: '../msgQuery/msgQuery?page=0'
				}, {
					src2: '/static/img/query_2.png',
					label: '从业人员查询',
					path: '../msgQuery/msgQuery?page=1'
				}, {
					src2: '/static/img/query_3.png',
					label: '营运车辆查询',
					path: '../msgQuery/msgQuery?page=2'
				}, {
					src2: '/static/img/query_4.png',
					label: '罐车罐体查询',
					path: '../msgQuery/msgQuery?page=3'
				}, {
					src2: '/static/img/query_5.png',
					label: '罐式集装箱查询',
					path: '../msgQuery/msgQuery?page=4'
				}, ],


				navList1: [{
					src2: '/static/img/query_6.png',
					label: '企业安全评估查询',
					path: '../msgQuery/security_qiye'
				}, {
					src2: '/static/img/query_7.png',
					label: '人员安全评估查询',
					path: '../msgQuery/security_persion'
				}]
				
			};
		},
		methods: {
			// 导航跳转
			navClick(path) {
				this.$goBack(path, 2);
			},
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100%;

		.title_border {

			.title_text {
				border-bottom: 1px #F0F0F0 solid;
				padding: 20rpx 0;

				.title {
					border-left: 3px #1e8be7 solid;
					margin: 0 0 0 30rpx;
					padding: 0 20rpx;
					color: #1e8be7
				}
			}

			// 首页导航下的图片
			.nav_each {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				margin: 10px 0;

				.nav_view {
					width: 23%;
					text-align: center;
					display: inline-block;
					margin: 4px 0;

					.item_view {
						width: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;

						.nav_img {
							width: 100rpx;
							height: 100rpx;
							display: flex;
							margin: 0 auto;
							justify-content: center;
							align-items: center;
							background: linear-gradient(7deg, #1590EF 0%, #5BB1F4 100%);
							box-shadow: 0px 7px 9px 0px rgba(87, 176, 245, 0.5);
							opacity: 1;
							border-radius: 60rpx;

							.nav_img_center {
								width: 50rpx;
								height: 45rpx;
							}
						}



						.nav_text {
							display: block;
							text-align: center;
							font-size: 22rpx;
							margin-top: 20rpx;
						}
					}

				}

			}



		}
	}
</style>
